<!--
 * @Description: 订单材料
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-08-14 17:49:21
 * @FilePath: /yuxiuproweb/src/views/mes/pro/invoice/mods/detail.vue
-->
<template>
  <div>
    <div style="margin: 0 30px 20px 30px" v-if="customCurtainList.length">
      <h2>定制窗帘</h2>
      <el-table ref="multipleTable" border :data="customCurtainList">
        <el-table-column label="" prop="name" width="60" align="center">
          <template slot-scope="{ row }">
            <div
              class="check"
              @click="goSend(row, '0')"
              v-if="!row.trackingNumber && activeName !== '1'"
            >
              <img
                v-if="
                  !!sendList.find(
                    (e) =>
                      `${e.orderId}` === `${data.proOrderId}` &&
                      `${e.productId}` === `${row.proOrderCustomCurtainId}`
                  )
                "
                src="@/assets/images/check.png"
                alt=""
              />
              <img v-else src="@/assets/images/check1.png" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          prop="name"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货单号"
          prop="trackingNumber"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货状态"
          prop="state"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.trackingNumber ? "已发货" : "未发货" }}
          </template>
        </el-table-column>
        <el-table-column label="明细" prop="curtainInfo" min-width="150">
          <template slot-scope="{ row }">
            {{ row.curtainInfo }} 面料：{{ row.detail }} 房间：{{
              row.room ? row.room.name : ""
            }}
            数量：{{ row.number }}
          </template>
        </el-table-column>
        <el-table-column
          label="余料"
          prop="oddments"
          width="100"
          align="center"
        >
          <template slot-scope="{ row }">
            {{
              row.oddments === "0"
                ? "无"
                : row.oddments === "1"
                ? "寄回"
                : row.oddments === "2"
                ? "加工"
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 0 30px" v-if="proOrderCustomWindowCurtains.length">
      <h2>定制窗幔</h2>
      <el-table ref="multipleTable" border :data="proOrderCustomWindowCurtains">
        <el-table-column label="" prop="name" width="60" align="center">
          <template slot-scope="{ row }">
            <div
              class="check"
              @click="goSend(row, '1')"
              v-if="!row.trackingNumber"
            >
              <img
                v-if="
                  !!sendList.find(
                    (e) =>
                      `${e.orderId}` === `${data.proOrderId}` &&
                      `${e.productId}` === `${row.orderCustomWindowCurtainId}`
                  )
                "
                src="@/assets/images/check.png"
                alt=""
              />
              <img v-else src="@/assets/images/check1.png" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          prop="name"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货单号"
          prop="trackingNumber"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货状态"
          prop="state"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.trackingNumber ? "已发货" : "未发货" }}
          </template>
        </el-table-column>
        <el-table-column label="明细" prop="name" min-width="150">
          <template slot-scope="{ row }">
            {{ row.name }} | {{ row.detail }} 数量：{{ row.number }}
          </template>
        </el-table-column>
        <el-table-column
          label="余料"
          prop="oddments"
          width="100"
          align="center"
        >
          <template slot-scope="{ row }">
            {{
              row.oddments === "0"
                ? "无"
                : row.oddments === "1"
                ? "寄回"
                : row.oddments === "2"
                ? "加工"
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 0 30px" v-if="proOrderCustomOthers.length">
      <h2>定制其他</h2>
      <el-table ref="multipleTable" border :data="proOrderCustomOthers">
        <el-table-column label="" prop="name" width="60" align="center">
          <template slot-scope="{ row }">
            <div
              class="check"
              @click="goSend(row, '2')"
              v-if="!row.trackingNumber"
            >
              <img
                v-if="
                  !!sendList.find(
                    (e) =>
                      `${e.orderId}` === `${data.proOrderId}` &&
                      `${e.productId}` === `${row.orderCustomOtherId}`
                  )
                "
                src="@/assets/images/check.png"
                alt=""
              />
              <img v-else src="@/assets/images/check1.png" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          prop="name"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货单号"
          prop="trackingNumber"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货状态"
          prop="state"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.trackingNumber ? "已发货" : "未发货" }}
          </template>
        </el-table-column>
        <el-table-column label="明细" prop="name" min-width="150">
          <template slot-scope="{ row }">
            {{ row.name }} | {{ row.detail }} 数量：{{ row.number }}
          </template>
        </el-table-column>
        <el-table-column
          label="余料"
          prop="oddments"
          width="100"
          align="center"
        >
          <template slot-scope="{ row }">
            {{
              row.oddments === "0"
                ? "无"
                : row.oddments === "1"
                ? "寄回"
                : row.oddments === "2"
                ? "加工"
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 0 30px" v-if="proOrderRaws.length">
      <h2>成品原料</h2>
      <el-table ref="multipleTable" border :data="proOrderRaws" class="mb40">
        <el-table-column label="" prop="name" width="60" align="center">
          <template slot-scope="{ row }">
            <div
              class="check"
              @click="goSend(row, '3')"
              v-if="!row.trackingNumber"
            >
              <img
                v-if="
                  !!sendList.find(
                    (e) =>
                      `${e.orderId}` === `${data.proOrderId}` &&
                      `${e.productId}` === `${row.orderRawId}`
                  )
                "
                src="@/assets/images/check.png"
                alt=""
              />
              <img v-else src="@/assets/images/check1.png" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          prop="name"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货单号"
          prop="trackingNumber"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发货状态"
          prop="state"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.trackingNumber ? "已发货" : "未发货" }}
          </template>
        </el-table-column>
        <el-table-column label="明细" prop="name" min-width="150">
          <template slot-scope="{ row }">
            {{ row.name }} 数量：{{ row.number }}
          </template>
        </el-table-column>
        <el-table-column
          label="余料"
          prop="oddments"
          width="100"
          align="center"
        >
          <template slot-scope="{ row }">
            {{
              row.oddments === "0"
                ? "无"
                : row.oddments === "1"
                ? "寄回"
                : row.oddments === "2"
                ? "加工"
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getInfo } from "@/api/asc/invoice";
export default {
  props: {
    data: Object,
    sendList: {
      type: Array,
      default: () => [],
    },
    activeName: String,
  },
  data() {
    return {
      customCurtainList: [],
      proOrderCustomWindowCurtains: [],
      proOrderCustomOthers: [],
      proOrderRaws: [],
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      getInfo({
        orderId: this.data.proOrderId,
      }).then((res) => {
        this.customCurtainList = res.data?.customCurtainList || [];
        this.proOrderCustomWindowCurtains =
          res.data?.proOrderCustomWindowCurtains || [];
        this.proOrderCustomOthers = res.data?.proOrderCustomOthers || [];
        this.proOrderRaws = res.data?.proOrderRaws || [];
      });
    },
    // 勾选
    goSend(row, type) {
      this.$emit("on-change", {
        orderId: `${this.data.proOrderId}`,
        productId:
          (type === "0" && `${row.proOrderCustomCurtainId}`) ||
          (type === "1" && `${row.orderCustomWindowCurtainId}`) ||
          (type === "2" && `${row.orderCustomOtherId}`) ||
          (type === "3" && `${row.orderRawId}`),
        type,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.check {
  width: 40px;
  height: 40px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
